CloudFront Functionsではヘッダーの先頭が大文字変換されるので気をつけよう
2024.08.301行まとめ
CloudFront Functionsを経由すると example-header-name => Example-Header-Name に変換される
はじめに
最近、CloudFront Functions を使ってIP制限を行っていた際に、フロントエンドから送信されたリクエストのヘッダー名が小文字から大文字に変換されるという問題に直面しました。この問題により、予期せぬ動作が発生し、解決に時間がかかりました。
この記事では、問題の詳細と再現方法について詳しく解説します。
AWSドキュメントの情報
開発者ガイドにも以下の通り記載があります。
headers オブジェクトには、リクエストのヘッダー 1 つにつき 1 つのフィールドが含まれます。ヘッダー名は、イベントオブジェクトでは小文字に変換されます。また、関数コードで追加する場合、ヘッダー名を小文字にする必要があります。CloudFront Functions がイベントオブジェクトを HTTP リクエストに変換し直すと、ヘッダー名の各単語の最初の文字が大文字になります。各単語はハイフン (-) で区切られます。例えば、関数コードが example-header-name という名前のヘッダーを追加した場合、CloudFront がこれを HTTP リクエストで Example-Header-Name に変換します。
仕様は記載の通りなので、本記事の続きでは実際に変換される様子を確かめていきます。
検証
構成
今回はヘッダー情報を確認するために、Lambdaでリクエスト情報をログ出力します。
なお、本記事ではAPIGateway, Lambdaなどの設定手順は省略します。
CDKによる全体の実装は以下リポジトリにあげています。
CloudFront Functionsの設定
何も値を変えずにそのままオリジンに対してリクエストを通過させるCloudFront Functionsを実装します。
function handler(event) {
const request = event.request;
/** 本来はこの辺りIP制限などの処理を挟む */
return request;
}
APIGatewayの前段に配置するCloudFrontを作成し、関数を紐付けます。
ログ出力を行うLambdaの実装
Lambdaの実装は以下のようになります。
ヘッダーをログ出力するだけです。
import { APIGatewayProxyHandler } from 'aws-lambda';
export const handler: APIGatewayProxyHandler = async (event, _context) => {
console.log(event.headers);
return {
statusCode: 200,
body: JSON.stringify({
message: 'Hello, CDK!',
}),
};
};
curlコマンドでAPI実行しログを確認する
CloudFrontを経由せず、APIGatewayのドメインへ直接リクエストした結果がこちらです。
curl -H "hoge-fuga: value" https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod/sample
CloudFront Functionsを紐付けた、CloudFrontへリクエストした結果がこちらです。
curl -H "hoge-fuga: value" https://xxxxxxxxxx.cloudfront.net/sample
ヘッダーのhoge-fuga > Hoge-Fuga に変換されていることが確認できました。
まとめ
今回の記事では、CloudFront Functionsを使用してIP制限を行う際に発生したヘッダー名の変換問題について詳しく解説しました。具体的には、フロントエンドから送信されたリクエストのヘッダー名が小文字から大文字に変換される現象を確認し、その影響と対策について検証しました。
AWSのドキュメントにも記載されている通り、CloudFront Functionsはヘッダー名を小文字に変換し、再度HTTPリクエストに変換する際に各単語の最初の文字を大文字にします。この仕様により、予期せぬ動作が発生する可能性があるため、この点を考慮して実装を行う必要があります。
